<template>
  <div class=""  v-loading="loading" element-loading-text="拼命加载中... 请耐心等候"
    element-loading-background="rgba(255, 255, 255, 0.8)">
    <el-row :gutter="30" v-if="events.length > 0" id="events-card-list">
      <el-col :span="8" v-for="(data, index) in events" :key="data.activityId" style="margin: 10px 0;">
        <event-card :data="data" :index="index"></event-card>
      </el-col>
      <!--   -->
      <el-col :span="24" style="margin-top: 45px;text-align: center;">
        <el-button type="success" plain round class="width-200" @click="addlist()" v-if="events.length < total">查看更多</el-button>
        <el-button type="success" plain round class="width-200" @click="goEventsList()">查看更多活动</el-button>
      </el-col>
    </el-row>

    <div class="flex-column-center promp-msg" style="height: 500px;" v-if="events.length === 0 && isVip && !loading">
      <img src="static/gongnengtishi.png" alt="">
      <h2>您尚未参加过任何活动</h2>
      <span>赶快寻找自己喜欢的活动报名吧！
        <span style="color: #94C05A;cursor: pointer;"  @click="goEventsList()">活动列表</span>
      </span>
    </div>

    <div class="flex-column-center promp-msg" style="height: 500px;" v-if="!isVip">
      <img src="static/gongnengtishi.png" alt="">
      <h2>无操作权限</h2>
      <span v-if="noVipStatus === 'NOVIP'">很抱歉！只有会员才可进行此操作，请先申请为会员！</span>
      <span v-if="noVipStatus === 'DISABLED'">会员已被禁用，暂时无法进行相关操作</span>
      <!-- <span v-if="noVipStatus === 'WAIT'">会员为待缴费状态，请及时缴费</span> -->
    </div>
  </div>

</template>

<script>
import EventCard from './EventCard'
import axios from 'axios'
import eventBus from '../../plugins/eventbus.js'
import { loginOut } from '../login/autologin';

export default {
  name: 'eventlist',
  title: '活动列表',
  data () {
    return {
      events: [], // 自己参加的所有活动
      noEvent: false,
      loading: false,
      total: 0,
      offset: 0, // 加载的页数
      limit: 6 // 每次加载限制在多少
    }
  },
  mounted () {
    if (!this.isVip) {
      this.getUserType()
    }
    if (this.isVip) {
      this.getSelfEvents()
      this.activated()
    }

  },
  methods: {
    addlist () {
      // this.total += 6
      this.offset += 1
      this.getSelfEvents(true)
    },
    getSelfEvents (isADD) {
      this.loading = true
      let params = {
        offset: this.offset * this.limit,
        limit: this.limit,
        userId: this.$store.state.user.user.user.userId
      }
      axios.post('/mscs/activity/findUserSignActivity', this.$paramsConvert(params)).then((res) => {
        if (res.data.code === 1) {
          if (res.data.data) {
            if (isADD) {
              this.events.push(...res.data.data.data)
            } else {
              this.events = res.data.data.data
            }
            this.total = res.data.data.total
          }
          if (this.events.length === 0) {
            this.noEvent = true
          }
        } else {
          this.$codeError(res)
        }
      }).catch((error) => {
        this.$catchError(error)
      }).finally(() => {
        this.loading = false
      })
    },
    // 保存完成后刷新使用
    activated(){
        //根据key名获取传递回来的参数，data就是map
        eventBus.$on('event-success', function(data){
          vm.getSelfEvents()
        }.bind(this));
    },
    getUserType () {
      axios.post('/mscs/user/findUserType', this.$paramsConvert({userId: this.$store.state.user.user.user.userId})).then((res) => {
        if (res.data.code === 1) {
          this.$store.commit('upUserType', {userType: res.data.data.userType})
          if (res.data.data.memberStatus) {
            this.$store.commit('upMemberStatus', res.data.data.memberStatus)
          }
          if (res.data.data.paymentStatus) {
            this.$store.commit('upPaymentStatus', res.data.data.paymentStatus)
          }
        }
      })
    },
    goEventsList () {
      this.$router.push({name: 'advisory', params: {type: '活动列表'}})
    }
  },
  computed: {
    isVip () {
      return this.$store.state.user.user &&
      (this.$store.state.user.user.user.userType === 'MEMBER' || this.$store.state.user.user.user.userType === 'CMEMBER') &&
      this.$store.state.user.user.memberStatus === "NORMAL"
    },
    noVipStatus () {
      if (!(this.$store.state.user.user && (this.$store.state.user.user.user.userType === 'MEMBER' || this.$store.state.user.user.user.userType === 'CMEMBER'))) {
        return 'NOVIP'
      }
      if (!(this.$store.state.user.user.memberStatus === "NORMAL")) {
        return 'DISABLED'
      }
      if (!(this.$store.state.user.user.paymentStatus === "ALREADY")) {
        return 'WAIT'
      }
    },
  },
  watch: {
    'isVip' (val) {
      if (val) {
        this.getSelfEvents()
        this.activated()
      }
    },
    '$store.state.user.token' (val) {
      if (!this.isVip && val) {
        this.getUserType()
      }
      if (this.isVip) {
        this.getSelfEvents()
      }
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      if (to.params.refresh) {
        vm.getSelfEvents()
      }
    })
  },
  components: {
    'event-card': EventCard
  }
}
</script>
